﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="~/lib/jquery/1.12.4/jquery.min.js"></script>
    <script src="~/lib/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="~/lib/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/framework-font.css" rel="stylesheet" />
    <link href="~/css/framework-theme.css" rel="stylesheet" />
    <link href="~/lib/select2/select2.min.css" rel="stylesheet" />
    <script src="~/lib/select2/select2.min.js"></script>
    <link href="~/lib/jqgrid/5.3.0/css/ui.jqgrid-bootstrap.css" rel="stylesheet" />
    <script src="~/lib/jqgrid/5.3.0/js/jquery.jqGrid.js"></script>
    <script src="~/lib/jqgrid/5.3.0/i18n/grid.locale-cn.js"></script>
    <script src="/lib/art-template/lib/template-web.js"></script>
    <link href="~/lib/bootstrap-paginator/bootstrap-paginator.min.css" rel="stylesheet" />
    <script src="~/lib/bootstrap-paginator/bootstrap-paginator.min.js"></script>
    <link href="~/lib/loadmask/jquery.loadmask.css" rel="stylesheet" />
    <script src="~/lib/loadmask/jquery.loadmask.js"></script>
    <link href="~/css/framework-ui.css" rel="stylesheet" />
    <script src="~/js/framework-ui.js"></script>
    <script type="text/html" id="thumbnail-template">
        {{each rows row index}}
        <div class="col-sm-4 col-md-3 col-lg-2">
            <div href="#" class="thumbnail">
                <img src="{{row.ThumbPath}}">
                <h5>{{row.FileName}}</h5>
                {{if row.MediaId==null || row.MediaId.trim()==''}}
                <a href="javascript:void(0);" class="btn btn-xs btn-primary thumb-upload" data-id="{{row.Id}}"><i class="fa fa-cloud-upload"></i> 上传</a>
                {{/if}}
                <a href="javascript:void(0);" class="btn btn-xs btn-info thumb-edit" data-id="{{row.Id}}"><i class="fa fa-pencil"></i> 编辑</a>
                <a href="javascript:void(0);" class="btn btn-xs btn-danger thumb-delete" data-id="{{row.Id}}"><i class="fa fa-trash"></i> 删除</a>
            </div>
        </div>
        {{/each}}
    </script>
    <style>
    </style>
</head>
<body>
    <div class="topPanel">
        <div class="toolbar">
            <div class="btn-group">
                <a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
            </div>
            <div class="btn-group">
                <a id="NF-Upload" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_upload()"><i class="fa fa-plus"></i>上传图片素材</a>
            </div>
            <div class="btn-group">
                <a id="NF-Choose" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_choose()"><i class="fa fa-plus"></i>选择图片素材</a>
            </div>
            <div class="operate">
                <ul class="nav nav-pills">
                    <li class="first">已选中<span>1</span>项</li>
                    <li><a id="NF-Edit" authorize="no" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>编辑文本素材</a></li>
                    <li><a id="NF-Details" authorize="no" onclick="btn_details()"><i class="fa fa-pencil-square-o"></i>查看文本素材</a></li>
                    <li><a id="NF-Delete" authorize="no" onclick="btn_delete()"><i class="fa fa-trash-o"></i>删除文本素材</a></li>
                </ul>
                <a href="javascript:;" class="close"></a>
            </div>
            <script>$('.toolbar').authorizeButton()</script>
        </div>
        <div class="search">
            <table>
                <tr>
                    <td>
                        <div class="input-group">
                            <input id="txt_keyword" type="text" class="form-control" placeholder="请输入标题/内容" style="width: 200px;">
                            <span class="input-group-btn">
                                <button id="btn_search" onclick="initPaginator()" type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="gridPanel">
        <table id="gridList"></table>
        <div id="gridPager"></div>
    </div>
    <div class="thumbPanel">
        <div class="row">
            <div class="col-md-12" id="thumbnails" style="overflow-y: auto;">
            </div>
        </div>
        <div class="row thumbPager">
            <div class="col-md-3">

            </div>
            <div class="col-md-6">
                <ul class="pagination" style="margin:0;padding:7px 0 0 0;"></ul>
            </div>
            <div class="col-md-3" style="text-align: right;">
                <p id="paginationInfo" style="margin: 0;padding:12px 4px;">无数据显示</p>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#thumbnails').height($(document).height() - 88);
            initPaginator();
        })
        function btn_upload() {
            $.modalOpen({
                id: "Form",
                title: "上传图片素材",
                url: "/WeixinManage/WxImage/Upload",
                width: "917px",
                height: "510px",
                btn: null
            });
        }
        function btn_choose() {
            $.modalOpen({
                id: "Choose",
                title: "选择图片素材",
                url: "/WeixinManage/WxImage/Choose",
                width: "85%",
                height: "85%",
                callBack: function (iframeId) {
                    top.frames[iframeId].submitForm();
                }
            });
        }
        function btn_edit() {
            var keyValue = $("#gridList").jqGridRowValue().Id;
            $.modalOpen({
                id: "Form",
                title: "编辑图片素材",
                url: "/WeixinManage/WxImage/Form?keyValue=" + keyValue,
                width: "550px",
                height: "870px",
                callBack: function (iframeId) {
                    top.frames[iframeId].submitForm();
                }
            });
        }
        function loadThumbnails(data) {
            var col1Html = template('thumbnail-template', data);
            document.getElementById('thumbnails').innerHTML = col1Html;
            bindThumbEvents();
        }
        function initPaginator() {
            $("body").mask("数据加载中，请稍后......");
            window.setTimeout(function () {
                $.ajax({
                    type: 'get',
                    url: '/WeixinManage/WxImage/GetGridJson?page=1&rows=18' + '&keyword=' + $('#txt_keyword').val(),
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        loadThumbnails(result);
                        var currentPage = result.page || 1;
                        var totalPages = result.total || 1;
                        var options = {
                            currentPage: currentPage, //当前页
                            totalPages: totalPages, //总页数
                            numberOfPages: 10, //设置控件显示的页码数
                            bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                            useBootstrapTooltip: false,//是否显示tip提示框
                            itemTexts: function (type, page, current) {//文字翻译
                                switch (type) {
                                    case "first": return "首页";
                                    case "prev": return "上一页";
                                    case "next": return "下一页";
                                    case "last": return "尾页";
                                    case "page": return page;
                                }
                            },
                            onPageClicked: onPageClicked
                        }
                        if (result.records == 0) {
                            $('#paginationInfo').text('无数据显示');
                        }
                        else {
                            $('#paginationInfo').text('显示第 ' + result.start + ' - ' + result.end + ' 条记录　检索到 ' + result.records + ' 条记录');
                        }
                        $('.pagination').bootstrapPaginator(options);
                        $("body").unmask();
                    }
                })
            }, 500);
        }
        function onPageClicked(event, originalEvent, type, page) {
            $("body").mask("数据加载中，请稍后......");
            window.setTimeout(function () {
                $.ajax({
                    type: 'get',
                    url: '/WeixinManage/WxImage/GetGridJson?page=' + page + '&rows=18&keyword=' + $('#txt_keyword').val(),
                    dataType: 'json',
                    success: function (result) {
                        loadThumbnails(result);
                        var currentPage = result.page || 1;
                        var totalPages = result.total || 1;
                        var options = {
                            currentPage: currentPage, //当前页
                            totalPages: totalPages, //总页数
                        }
                        if (result.records == 0) {
                            $('#paginationInfo').text('无数据显示');
                        }
                        else {
                            $('#paginationInfo').text('显示第 ' + result.start + ' - ' + result.end + ' 条记录　检索到 ' + result.records + ' 条记录');
                        }
                        $('.pagination').bootstrapPaginator(options);
                        $("body").unmask();
                    }
                })
            }, 500);
        }
        function bindThumbEvents() {
            $('.thumb-upload').unbind();
            $('.thumb-upload').bind('click', function () {
                var id = $(this).data('id');
                $.modalConfirm('注：您确定要上传该图片素材吗？', function (result) {
                    if (result) {
                        $.loading(true, '正在上传该图片素材，请耐心等待......');
                        window.setTimeout(function () {
                            $.ajax({
                                url: '/WeixinManage/WxImage/UploadForeverImage',
                                data: { keyValue: id },
                                type: "post",
                                dataType: "json",
                                success: function (data) {
                                    $.loading(false);
                                    if (data.state == "success") {
                                        initPaginator();
                                        $.modalMsg(data.message, data.state);
                                    } else {
                                        $.modalAlert(data.message, data.state);
                                    }
                                }
                            });
                        }, 500);
                    }
                })
            });

            $('.thumb-edit').unbind();
            $('.thumb-edit').bind('click', function () {
                var keyValue = $(this).data('id');
                $.modalOpen({
                    id: "Form",
                    title: "编辑图片素材",
                    url: "/WeixinManage/WxImage/Form?keyValue=" + keyValue,
                    width: "550px",
                    height: "570px",
                    callBack: function (iframeId) {
                        top.frames[iframeId].submitForm();
                    }
                });
            });
            $('.thumb-delete').unbind();
            $('.thumb-delete').bind('click', function () {
                var keyValue = $(this).data('id');
                $.deleteForm({
                    url: "/WeixinManage/WxImage/DeleteForm",
                    param: { keyValue: keyValue },
                    success: function () {
                        initPaginator();
                    }
                })
            });
        }
    </script>
</body>
</html>
